<extend name="Layout:layout"/>

<block name="css">
    <link rel="stylesheet" href="">
    <!-- Metis Theme stylesheet -->

    <style type="text/css"></style>
</block>

<block name="srcjs">
    <script type="text/javascript" src=""></script>
</block>

<block name="content">

    <div class="box">

        <header class="dark">
            <div class="icons"> <i class="fa fa-check"></i>
            </div>
            <h5>配置种类</h5>
            <div class="text-right" style="padding: 5px 10px 0px 0px">
                <a href="javascript:history.go(-1)" class="btn btn-info btn-sm">返回</a>
            </div>
        </header>
        <div class="row">
            <div class="col-lg-12">
                <form class="form-horizontal" id="catagoryForm" style="margin-top:10px">
                    <div class="form-group">
                        <label for="catagory_name" class="col-lg-4 control-label">新增种类名称：</label>
                        <div class="col-lg-4">
                            <input type="text" class="form-control" name="catagory_name" id="catagory_name"></div>
                        <button class="btn btn-info btn-sm" type="button" id="btnAddCatagory">新增</button>
                    </div>
                    <hr>

                    <div class="form-group">
                        <div class="col-lg-3">
                        </div>

                        <div class="col-lg-4">
                            <select id="selectCatagoryConfig" class="form-control" size="10">
                                <volist name="catagory" id="item">
                                    <option value="{$item.id}">{$item.name}</option>
                                </volist>
                            </select>
                        </div>
                        <div class="col-lg-4">
                            <button type="button" id="btnModifyName" class="btn btn-default btn-sm" data-toggle="modal">更改</button><br><br>
                            <button type="button" id="btnMoveUp" class="btn btn-default btn-sm">上移</button><br><br>
                            <button type="button" id="btnMoveDown" class="btn btn-default btn-sm">下移</button><br><br>
                            <button type="button" id="btnDelCatagory" class="btn btn-default btn-sm">删除</button><br><br>

                        </div>

                    </div>

                    <div class="form-group">
                        <div class="text-center">
                            <button type="button" class="btn btn-default btn-sm" id="btnSaveCatagoryConfig">保存设置</button><br><br>
                        </div>
                    </div>


                </form>


            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="modifyNameModal" tabindex="-1" role="dialog" aria-labelledby="modifyNameModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span>
                        <span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title" id="modifyNameModalLabel">更新学习文档</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">

                        <div class="form-group">
                            <label for="catagory_old_name" class="col-sm-2 control-label">原名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="input-read" id="catagory_old_name" readonly="true"></div>
                        </div>

                        <div class="form-group">
                            <label for="catagory_new_name" class="col-sm-2 control-label">新名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="catagory_new_name" ></div>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" id="btnSubmitModifyName" class="btn btn-primary">确定</button>
                </div>
            </div>
        </div>
    </div>

</block>

<block name="customjs">


    <script>
        $(function () {
            $("#btnAddCatagory").click(function () {
                var catagory_name = $.trim($("#catagory_name").val());
                if (catagory_name === "") {
                    alert("请输入种类名称！");
                    $("#catagory_name").focus();
                    return;
                }
                
                $("#selectCatagoryConfig").append("<option>"+catagory_name+"</option>");
            });
            
            $("#btnMoveUp").click(function(){
               var $opt = $("#selectCatagoryConfig option:selected");
               $opt.prev().before($opt);
            });
            
            $("#btnMoveDown").click(function(){
               var $opt = $("#selectCatagoryConfig option:selected");
               $opt.next().after($opt); 
            });
            
            
            
            $("#btnModifyName").click(function(){
                var text = $("#selectCatagoryConfig option:selected").text();
                if( text === ""){
                    alert("请选择！");
                    return;
                }
                $("#catagory_old_name").val(text);
                $("#catagory_new_name").val("");
                $('#modifyNameModal').modal('show');
            });
            
            $("#btnSubmitModifyName").click(function(){
                var text = $.trim($("#catagory_new_name").val());
                if( text === ""){
                    alert("请输入名称！");
                    $("#catagory_new_name").focus();
                    return;
                }
                $("#selectCatagoryConfig option:selected").text(text);
                $('#modifyNameModal').modal('hide');
            });
            
            $("#btnDelCatagory").click(function(){
                var text = $("#selectCatagoryConfig option:selected").text();
                if( text === ""){
                    alert("请选择！");
                    return;
                }

                $("#selectCatagoryConfig option:selected").remove();

                
            });
            
            
            $("#btnSaveCatagoryConfig").click(function(){
                var arr = new Array();
                var obj = null;
                $("#selectCatagoryConfig").find("option").each(function(i){
                    obj = {
                        //"id" : $(this).val(),
                        "name" : $(this).text(),
                        "order" : i+1
                    };
                   arr.push(obj);
                });
                //console.log(arr);
                
                var sendData = { "data" : arr };
                $.post("{:U('saveCatagoryConfig')}", sendData).done(function(responseData){
                    if (responseData.status === 1) {
                        alert(responseData.info);
                        location.href = responseData.jumpUrl;
                    }
                });
            });
            
        });
    </script>

</block>